'use strict';

import React, { Component, PropTypes } from 'react';
import ReactNative, { Text, View, StyleSheet, Platform, TouchableOpacity, TouchableNativeFeedback, ListView, Image, PixelRatio, TouchableHighlight } from 'react-native';
import px2dp from '../util/px2dp';
import Icon from 'react-native-vector-icons/MaterialIcons';
import theme from '../config/Theme';
import TextButton from '../component/TextButton';
import Main from '../page/Main'
import WebViewPage from '../page/WebView'

export default class ListViewForOther extends Component {
    static propTypes = {
        refreshing: PropTypes.func
    };

    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => r1 !== r2
        });
        this.state = {
            dataSource: ds.cloneWithRows(this.props.contents)
        };
    }

    _jumpWebview(rowData) {
        this.props.navigator.push({
            component: WebViewPage,
            args: { rowData: rowData }
        });
    }

    _itemView(rowData) {
        return (<View style={styles.items}>
            <View style={styles.userBar}>
                <View style={{ flex: 10 }}>
                    <Image style={styles.avatar} source={{ uri: rowData.title_pic }} />
                </View>
                <View style={{ flex: 90, marginLeft: px2dp(35), flexDirection: 'row' }}>
                    <View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 3 }}>
                        <Text style={{ fontSize: px2dp(14), color: 'black' }}>{rowData.title}</Text>
                        <Text style={{ fontSize: px2dp(12), color: theme.grayColor }}>{rowData.modifyTime}</Text>
                    </View>
                    <View style={{ flexDirection: 'column', justifyContent: 'space-between', flex: 1, marginLeft: px2dp(15) }}>
                        <TextButton
                            // onPress={this._userNameClickCallback.bind(this, rowData.user)}
                            text='分享赚钱'
                            color='forestgreen'
                            fontSize={px2dp(13)}
                        />
                        <Text style={{ fontSize: px2dp(12), color: theme.grayColor }}>3分/阅读</Text>
                    </View>
                </View>
            </View>
        </View>);
    }

    _renderItem(rowData, sectionID, rowID, highlightRow) {
        if (Platform.OS === 'ios') {
            return (
                <TouchableOpacity onPress={
                    this._jumpWebview.bind(this, rowData)//由于自己的粗心大意导致拿不到导航器属性，搞了好久，同时也说明了rn的导航器真的很难用不方便，需要封装BaseComponent
                }>
                    {this._itemView(rowData)}
                </TouchableOpacity>
            );
        } else {
            return (
                <TouchableNativeFeedback onPress={
                    this._jumpWebview.bind(this, rowData)//由于自己的粗心大意导致拿不到导航器属性，搞了好久，同时也说明了rn的导航器真的很难用不方便，需要封装BaseComponent
                }>
                    {this._itemView(rowData)}
                </TouchableNativeFeedback>
            );
        }

    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <ListView
                    style={styles.listView}
                    dataSource={this.state.dataSource}
                    renderRow={this._renderItem.bind(this)}
                />
            </View>
        )
    }

    /*_renderItemContent(rowData){
        return(
            <View style={styles.linkView}>
                <View style={{flex: 20}}>
                    {rowData.screenshot ?
                        <Image source={{uri: rowData.screenshot.url}}
                               style={styles.linkImage}/>
                        :
                        <Image source={require('../image/user_article_no_data.png')}
                               style={styles.linkImage}/>
                    }
                </View>
                <View style={{
                    flex: 80,
                    justifyContent: 'center',
                    alignItems: 'flex-start',
                    padding: px2dp(5)
                }}>
                    <Text style={styles.linkText} numberOfLines={2}>{rowData.title}</Text>
                </View>
            </View>
        );
    }*/
}

const styles = StyleSheet.create({
    listView: {
        marginTop: px2dp(10)
    },
    items: {
        backgroundColor: '#fff',
        borderTopWidth: 1 / PixelRatio.get(),
        borderBottomWidth: 1 / PixelRatio.get(),
        borderBottomColor: '#c4c4c4',
        borderTopColor: '#e4e4e4',
        marginBottom: px2dp(7)
    },
    userBar: {
        padding: px2dp(10),
        flexDirection: 'row',
        height: px2dp(75),
        width: theme.screenWidth
    },
    avatar: {
        width: px2dp(55),
        height: px2dp(55),
        borderRadius: 3
    },
    content: {
        color: '#000',
        padding: px2dp(10)
    },
    linkView: {
        flexDirection: 'row',
        height: px2dp(60),
        width: theme.screenWidth - px2dp(20),
        borderWidth: 1 / PixelRatio.get(),
        borderColor: theme.grayColor,
        marginLeft: px2dp(10),
        marginRight: px2dp(10)
    },
    linkImage: {
        width: px2dp(59),
        height: px2dp(59),
        resizeMode: 'cover',
        backgroundColor: '#f4f4f4'
    },
    linkText: {
        fontSize: px2dp(16),
        color: '#000',
        fontWeight: 'bold'
    },
    banner: {
        width: theme.screenWidth,
        height: px2dp(120),
        resizeMode: 'cover',
        marginTop: px2dp(10),
    },
    bottom: {
        flexDirection: 'row',
        padding: px2dp(10),
        alignItems: 'center'
    },
    commentText: {
        marginRight: px2dp(25),
        marginLeft: px2dp(5)
    },
});